<!-- TYPEAHEAD POPUP STYLING -->
<script type="text/ng-template" id="customPopupTemplate.html">
  <div class="custom-popup-wrapper"
       ng-style="{top: position().top + 'px', left: position().left - 31 + 'px'}"
       style="display: block; width: 270px"
       ng-show="isOpen() && !moveInProgress"
       aria-hidden="{{!isOpen()}}">

    <ul class="dropdown-menu" role="listbox">
      <li class="uib-typeahead-match" ng-repeat="match in matches track by $index" ng-class="{active: isActive($index) }"
          ng-mouseenter="selectActive($index)" ng-click="selectMatch($index)" role="option" id="{{::match.id}}">
        <div uib-typeahead-match index="$index" match="match" query="query" template-url="templateUrl"></div>
      </li>
    </ul>
  </div>
</script>
<!-- TYPEAHEAD POPUP STYLING -->

<error ng-show="vm.showError"
       error-type="vm.errorType"
       error-file="vm.file"
       error-folder="vm.folder"
       on-error-confirm="vm.confirmError()"
       on-error-cancel="vm.cancelError()"></error>
<div class="dialogWrapper" ng-class="vm.wrapperClass">
  <div class="header">
    <div class="headerTop">
      <div class="headerTitle headerText">
        {{::vm.headerTitle}}
      </div>
      <div class="headerSearch" ng-class="{'focused': vm.isInSearch === true}">
        <div class="headerSearchLeft" ng-class="{'blueState': vm.searchString !== '' || vm.isInSearch === true }" ></div>
        <input type="text" class="searchBox"
               uib-typeahead="search for search in vm.recentSearches | filter:$viewValue | limitTo:5"
               placeholder="{{::vm.searchPlaceholder}} {{vm.selectedFolder}}"
               typeahead-on-select="vm.doSearch()"
               ng-blur="vm.storeRecentSearch()"
               ng-focus="vm.isInSearch = true"
               ng-change="vm.doSearch()"
               ng-model="vm.searchString"
               typeahead-popup-template-url="customPopupTemplate.html"
               typeahead-min-length="0"/>
        <div ng-class="{'headerSearchRight': vm.searchString !== '' }" ng-click="vm.resetSearch()"></div>
      </div>
    </div>

    <div class="headerBottom">
      <div ng-show="vm.searchString" class="breadcrumbSection">
        Search results in "{{vm.folder.name}}"
      </div>
      <div ng-hide="vm.searchString" class="breadcrumbSection blueText">
        <breadcrumb path="vm.folder.path"
                    include-root="vm.includeRoot"
                    on-select="vm.selectFolderByPath(selectedPath)"></breadcrumb>
      </div>
      <div class="addDelete">
        <div class="addFolder" ng-click="vm.addFolder()"></div>
        <div class="deleteFolder" ng-click="vm.remove()"></div>
      </div>
    </div>
  </div>

  <div class="middle">
    <div class="directoryTreeArea">
      <folder auto-expand="vm.autoExpand"
              folders="vm.folders"
              on-select="vm.resetSearch(); vm.selectFolder(selectedFolder);"
              show-recents="vm.showRecents"
              selected-folder="vm.folder"></folder>
    </div>

    <div class="fileArea" ng-class="{overflow: vm.showRecents}">
        <div class="fileAreaMessageView" ng-show="vm.showRecents && vm.recentFiles.length === 0">{{::vm.noRecentsMsg}}</div>
        <card ng-show="vm.showRecents && vm.recentFiles.length > 0"
              recent-files="vm.recentFiles"
              on-click="vm.selectFile(file)"
              on-select="vm.highlightFile(selectedFile)"></card>
        <files search="vm.searchString"
               ng-show="!vm.showRecents"
               folder="vm.folder"
               on-click="vm.selectFile(file)"
               on-select="vm.highlightFile(selectedFile)"></files>
    </div>
  </div>

  <div class="bottom">
    <div class="fileNameEntry">
      <div class="fileNameEntryLabel">
        <label for="fileNameEntryTextBox">{{::vm.saveFileNameLabel}}</label>
      </div>
      <input id="fileNameEntryTextBox" type="text" class="fileNameEntryTextBox"
      ng-model="vm.fileToSave"/>
    </div>
    <div class="buttons">
      <button class="secondary" ng-click="vm.cancel()">{{::vm.cancelButton}}</button>
      <button class="primary" ng-click="vm.openOrSave()">{{::vm.confirmButton}}</button>
    </div>
  </div>
</div>